<template>
<div>

  <section class="main isPc">
    <section class="order">
      <p class="pTitle">
        <router-link tag="a" to="/">首页</router-link> - 
        <router-link tag="a" to="/about">我的主页</router-link> - 
        我的订单
      </p>
      <div class="info">
        <div class="orderTop">
          <span :class="{active:orderTop.nav02}" @click="getList(1)">正在处理的订单</span>
          <span :class="{active:orderTop.nav03}" @click="getList(3)">已完成的订单</span>
          <span :class="{active:orderTop.nav04}" @click="getList(4)">已取消的订单</span>
        </div>
        <div class="loading" v-if="loadStart"></div>
        <div  v-if="!loadStart">
          <div class="orderNone" v-if="orderList.length==0">
            无
          </div>
          <div class="orderList" v-if="orderList.length>0">

                <div class="item" v-for="item in orderList">
                  <div class="itemTop">
                    <p class="name">收货人：{{item.order_username}}</p>
                    <p class="time">下单时间：{{item.created_at}}</p>
                    <p class="number">订单号：{{item.trade_no}}</p>
                    <router-link class="desc" tag="p" :to="{path:'/orderShow',query: {id:item.id}}">订单详情</router-link>
                  </div>
                  <div class="itemInfo">
                    <ul :class="{more:item.show}">
                      <li class="top">
                        <p class="t1">商品</p>
                        <p class="t2">单价</p>
                        <p class="t3">数量</p>
                        <p class="t4">小计</p>
                      </li>
                      <li v-for="list in item.order_items">
                        <p class="t1">
                          <router-link :to="'prcShow?id='+list.goods_id"><img :src="list.goods_logo"> </router-link><router-link :to="'prcShow?id='+list.goods_id">{{list.goods_name}} </router-link>
                        </p>
                        <p class="t2">£{{list.goods_price|allPrice}}</p>
                        <p class="t3">{{list.goods_count}}</p>
                        <p class="t4">£{{list.total_price|allPrice}}</p>
                      </li>
                    </ul>
                  </div>
                  <div class="itemBottom">
                    <div v-if="item.ratio!=100" class="addDiv">
                      <p class="addP old">原价：<span>£{{item.amount|allPrice}}</span></p>
                      <p class="addP">折扣：<span>{{item.ratio|aa}}折</span></p>
                      <p class="addP">总价：<span>£{{item.order_amount|allPrice}}</span></p>
                    </div>
                    <div v-if="item.ratio==100" class="addDiv">
                      <p class="addP">总价：<span>£{{item.order_amount|allPrice}}</span></p>
                    </div>
                    <span v-if="item.order_items.length>2" class="more" @click="lookMore(item)"></span>
                  </div>
                </div>
          </div>
        </div>

      </div>
    </section>
  </section>

  <section class="mainWap isWap">
    <p class="wapTopTitle">个人中心</p>
    <p class="wapTopTxtle">个人中心-我的订单</p>
    <div class="orderWap">
        <div class="orderTop">
          <select class="wapSelect" v-model="wapTab">
            <option value="1">正在处理的订单</option>
            <option value="3">已完成的订单</option>
            <option value="4">已取消的订单</option>
          </select>
        </div>
        <div class="loading" v-if="loadStart"></div>
        <div  v-if="!loadStart">
          <div class="orderNone" v-if="orderList.length==0">
            无
          </div>
          <div class="orderList" v-if="orderList.length>0">

                <div class="item" v-for="item in orderList">
                  <div class="itemTop">
                    <p class="name">收货人：{{item.order_username}}</p>
                    <p class="time">下单时间：{{item.created_at}}</p>
                    <p class="number">订单号：{{item.trade_no}}</p>
                  </div>
                  <div class="itemInfo">
                    <ul :class="{more:item.show}">
                      <li v-for="list in item.order_items">
                        <p class="t1">
                          <router-link :to="'prcShow?id='+list.goods_id"><img :src="list.goods_logo"> </router-link><router-link :to="'prcShow?id='+list.goods_id">{{list.goods_name}} </router-link>
                        </p>
                        <div class="tr">
                          <p class="t2">£{{list.goods_price|allPrice}}</p>
                          <p class="t3">x{{list.goods_count}}</p>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div class="itemBottom">
                    <router-link class="desc" tag="p" :to="{path:'/orderShow',query: {id:item.id}}">点击查看订单详情</router-link>
                    <div v-if="item.ratio!=100" class="addDiv">
                      <p class="addP old">原价：<span>£{{item.amount|allPrice}}</span></p>
                      <p class="addP">折扣：<span>{{item.ratio|aa}}折</span></p>
                      <p class="addP">总价：<span>£{{item.order_amount|allPrice}}</span></p>
                    </div>
                    <div v-if="item.ratio==100" class="addDiv">
                      <p class="addP">总价：<span>£{{item.order_amount|allPrice}}</span></p>
                    </div>
                  </div>
                </div>
          </div>
        </div>
    </div>
  </section>
  
</div>
</template>
<script>
import axios from 'axios'
import {Get} from '@/config/api.js'
export default {
  name: 'order',
  data() {
    return {
      loadStart: false,
      orderTop:{
        nav01:false,
        nav02:false,
        nav03:false,
        nav04:false,
      },
      orderList:[],
      date: [],
      wapTab:1
    }
  },
  mounted() {
    this.vLogin()
    this.getList(1)
  },
filters:{
    aa(val){
      return val/10
    }
  },
  created() {
    this.$store.dispatch("isLoading",false)
  },
  watch:{
    wapTab:function(){
      this.getList(this.wapTab)
    }
  },
  methods: {
    //请求所有数据
/*    async getData() {
      if (this.vLogin()) {
        this.loadStart=true
        for(let key in this.orderTop){
          this.$set(this.orderTop,key,false)
        }
        this.$set(this.orderTop,'nav02',true)
        let that=this
        let reg=await Get('/order?_include=order_items,user',this.$store.state.token)
        setTimeout(function(){
          that.orderList=reg.data
          that.loadStart=false
        },1000)
      }
    },*/
    //请求单项数据
    async getList(val){
      if (this.vLogin()) {
        this.$store.dispatch("isLoading",true)
        for(let key in this.orderTop){
          this.$set(this.orderTop,key,false)
        }
        this.$set(this.orderTop,'nav0'+val,true)
        let that=this
        let reg=await Get('/order?_include=order_items,user&status='+val,this.$store.state.token)
        setTimeout(function(){
          that.orderList=reg.data
          that.orderList.forEach(function (value) {
                that.$set(value,'show',false);
          });
          that.$store.dispatch("isLoading",false)
        },1000)
      }
    },
    //点击显示更新
    lookMore(e){
      e.show=true
    },
    //跳转到详情页
    goOrderDes(e) {
      this.$router.push({ path: '/orderDes', query: { id: e } })
    }
  }
}

</script>
